// interface Setting {
//   svgId: string | null,
//   strokeColor: string,
//   strokeWidth: string,
//   animationTime: number,
//   interval: number,
//   fadeOutTime: number,
//   lifeTime: number,
//   width: number,
//   height: number,
//   leftRight: boolean,
//   easing: string,
//   animationTimeRange: number[] | null
// }
// export default class Ckline {
//   viewportwidth!: number;
//   viewportHeight!: number;
//   $el!: string;
//   interval!: NodeJS.Timer;
//   settings!: Setting;
//   constructor(option: Setting) {
//     this.settings = {
//       svgId: null,
//       strokeColor: '#000',
//       strokeWidth: '2',
//       animationTime: 1000,
//       interval: 600,
//       fadeOutTime: 800,
//       lifeTime: 2000,
//       width: 0,
//       height: 0,
//       leftRight: true,
//       easing: 'swing',
//       animationTimeRange: null
//     }
//     Object.assign(this.settings, option)
//     this.init()
//   }
//   init() {
//     this.creatLine(this.settings.width, this.settings.height).then(res => {
//       if (res) {
//         this.animate()
//       }
//     }).catch(err => {
//       console.log(err);

//     })
//   }
//   creatLine(width: number, height: number) {
//     return new Promise((rep, rej) => {
//       try {
//         var startItemsWidth = new Array(0, width),
//           ramdomItemWidth = startItemsWidth[Math.floor(Math.random() * startItemsWidth.length)],
//           startItemsHeight = new Array(0, height),
//           ramdomItemHeight = startItemsHeight[Math.floor(Math.random() * startItemsHeight.length)];
//         var svgns = 'http://www.w3.org/2000/svg';
//         var x1 = ramdomItemWidth,
//           y1 = Math.random() * height,
//           x2,
//           y2 = Math.random() * height;
//         var randomBool = true;
//         if (this.settings.leftRight === false) {
//           randomBool = Math.random() >= 0.5;
//         }
//         if (randomBool == true) {
//           x1 = ramdomItemWidth;
//           if (ramdomItemWidth === 0) {
//             x2 = width;
//           } else {
//             x2 = 0;
//           }
//         } else {
//           var range1 = Math.floor(Math.random() * width) + 0;
//           var range2 = Math.floor(Math.random() * width) + 0;
//           x1 = range1;
//           x2 = range2;
//           y1 = ramdomItemHeight;
//           if (ramdomItemHeight === 0) {
//             y2 = height;
//           } else {
//             y2 = 0;
//           }
//         }
//         //var line = document.createElementNS(svgns, 'line');
//         var line: any = document.createElementNS(svgns, 'path');
//         line.setAttributeNS(null, 'd', 'M ' + x1 + ',' + y1 + ' L ' + x2 + ',' + y2);
//         line.setAttributeNS(null, 'stroke-width', this.settings.strokeWidth);
//         line.setAttributeNS(null, 'stroke', this.settings.strokeColor);
//         line.setAttributeNS(null, 'class', 'ckline off');
//         if (this.settings.svgId) {
//           console.log(line);

//           document.getElementById(this.settings.svgId)!.appendChild(line);
//         } else {
//           console.log(line);
//           document.documentElement.getElementsByTagName('body')[0].append(line);
//         }
//         var length = line.getTotalLength();
//         line.setAttributeNS(null, 'stroke-dasharray', length);
//         line.setAttributeNS(null, 'stroke-dashoffset', length);
//         rep(true)
//       } catch (err) {
//         console.log(err);
//         rej(err)
//       }
//     })
//   }
//   animate() {
//     var time = this.settings.animationTime;
//     if (this.settings.animationTimeRange) {
//       time = Math.floor(
//         Math.random() * (this.settings.animationTimeRange[1] - this.settings.animationTimeRange[0] + 1) +
//         this.settings.animationTimeRange[0]
//       );
//       //console.log(time);
//     }
//     let cklineOffList = document.getElementsByClassName('ckline off')
//     let cklineOffListLen = cklineOffList.length
//     console.log(this);

//     for (let i = 0; i < cklineOffListLen; i++) {
//       const cklineOff = cklineOffList[i];
//       console.log(cklineOff);

//     }
//     // document.getElementsByClassName('ckline off').forEach((cklineOff) => {
//     //   console.log(cklineOff);

//     // jQuery(this).addClass('on').removeClass('off');
//     // jQuery(this).animate(
//     //   {
//     //     'stroke-dashoffset': 0
//     //   },
//     //   time,
//     //   this.settings.easing
//     // );
//     // var $this = jQuery(this);
//     // setTimeout(function () {
//     //   $this.fadeOut(this.settings.fadeOutTime, function () {
//     //     jQuery(this).remove();
//     //   });
//     // }, this.settings.lifeTime);
//     // });
//   }
// }